<template>
    <el-container class="st-height-100-pc">
        <el-aside width="200px"  class="st-height-100-pc">
            <el-scrollbar class="st-height-100-pc st-el-scroll-vertical">
                <StElTree cache-key="areaList" :datas="computedUrl.list" @nodeClick="nodeClick"
                          :origin-prop="{filterNodeMethod: treeFilter}"></StElTree>
            </el-scrollbar>

        </el-aside>
        <el-main>
            <StElDynamicForm :helper-form="helperForm"
                             :submit-props="{method: 'get',loading: searchLoading,onSubmit:(form)=>{queryParams = $stObjectTools.emptyToNull($stObjectTools.clone(form))}}"
                             :options="computedFormOptions" :origin-prop="{inline: true,labelWidth: '150px'}">
                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('添加')"
                               @click="$router.push(computedUrl.router.add)" size="mini">添加
                    </el-button>
                </template>
            </StElDynamicForm>
            <StElTable ref="steltable" :options="computedTableOptions" @loading="(val)=>{searchLoading = val}"
                       :datas="computedUrl.searchList" :query-params="queryParams">
                <template #append>
                    <el-table-column
                            label="操作"
                            width="200">
                        <template #default="{row,column,$index}">
                            <StElButtonGroup :group-param="{row,column,$index}"
                                             :operationMoreButtonOptions="{stype: 'link'}"
                                             :operations="tableOperations">
                            </StElButtonGroup>
                        </template>
                    </el-table-column>

                </template>
            </StElTable>
        </el-main>
    </el-container>
</template>

<script>
    import AreaMixin from '../AreaMixin.js'

    export default {
        name: "AreaSearchList",
        mixins: [AreaMixin],
        props: {},
        computed: {},
        data() {
            return {
                queryParams: {},
                searchLoading: false,
                helperForm: {
                    parentId: ''
                },
                tableOperations: [{
                    label: '删除',
                    stype: 'link',
                    loading: false,
                    requestSuccess: ({groupParam}) => {
                        // 删除当前行，不重新请求
                        this.$refs.steltable.getTableData().splice(groupParam.$index, 1)
                    },
                    action: ({groupParam}) => {
                        return {
                            method: 'delete',
                            url: this.$stStringTools.replaceb(this.computedUrl.delete, {id: groupParam.row.id}),
                            confirmText: `确定删除${groupParam.row.name}吗`
                        }
                    }
                },
                {
                    label: '修改',
                    stype: 'link',
                    action: ({groupParam}) => {
                        this.$router.push({path: this.computedUrl.router.update, query: {id: groupParam.row.id}})
                    }
                }, {
                    label: '添加子级',
                    stype: 'link',
                    action: ({groupParam}) => {
                        this.$router.push({path: this.computedUrl.router.add, query: {parentId: groupParam.row.id}})
                    }
                },
                ]
            }
        },
        methods: {
            nodeClick(data) {
                this.helperForm.parentId = data.id
            },
            treeFilter(keyword, data) {
                if (!keyword) return true;
                return data.name.indexOf(keyword) !== -1
                    || data.spellFirst.indexOf(keyword) !== -1
                    || data.spellSimple.indexOf(keyword) !== -1
                    || data.spell.indexOf(keyword) !== -1
                    ;
            }
        }
    }
</script>

<style scoped>

</style>